<!DOCTYPE html>
<html lang="en" class="normalFont">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Elements: The Periodic Table is a Progressive Web App (PWA) and provides useful information about the chemical elements. Know more about the properties, history, name origin, images, applications, hazards and electron shell diagram of each element.">   
    <meta name="keywords" content="Periodic Table, chemical, elements, interactive, PWA, properties, history, name origin, images, applications, hazards, electron shell, diagram, chemistry, electron configuration, isotopes, information">
    <meta name="author" content="Naveen CS" />
    <link rel="apple-touch-icon" sizes="180x180" href="/images/icons/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
    <link rel="manifest" href="manifest.json" />
    <link rel="mask-icon" href="safari-pinned-tab.svg" color="#0078d7" />
    <link rel="canonical" href="https://periodic-table.io/element.html">
    <meta name="msapplication-TileColor" content="#0078d7" />
    <meta name="msapplication-TileImage" content="/images/icons/mstile-144x144.png" />
    <meta name="msapplication-square70x70logo" content="/images/icons/mstile-70x70.png" />
    <meta name="msapplication-square150x150logo" content="/images/icons/mstile-150x150.png" />
    <meta name="msapplication-wide310x150logo" content="/images/icons/mstile-310x150.png" />
    <meta name="msapplication-square310x310logo" content="/images/icons/mstile-310x310.png" />
    <meta name="theme-color" content="#0078d7" />
    <meta name="google" content="notranslate" />
    <meta name="robots" content="index,follow" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta property="og:site_name" content="Periodic-Table.io" />
    <meta property="og:title" content="Elements: The Periodic Table" />
    <meta property="og:description" content="Elements: The Periodic Table is a Progressive Web App (PWA) and provides comprehensive and useful information about the chemical elements all in one place. Know more about the properties, history, name origin, images, applications, hazards and electron shell diagram of each element." />
    <meta property="og:image" content="https://periodic-table.io/images/icons/android-chrome-256x256.png" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://periodic-table.io/element.html" />
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@periodictableio">

    <title id="homeTitle">Elements: The Periodic Table</title>
    <link rel="stylesheet" href="style.min.css" />
    <script defer src="svelte-bundle.js"></script>

    <!-- <script src="bundle.js"></script> -->
    <script>
      if ("serviceWorker" in navigator) {
        window.addEventListener("load", function () {
          navigator.serviceWorker
            .register("/sw.js")
            .then(function (o) {
              console.log("Workbox SW registered: ", o);
            })
            .catch(function (o) {
              console.log("Workbox SW registration failed: ", o);
            });
        });
      }
    </script>
  </head>

  <body id="body">
    <script>
      document.body.className += " fade-out";
    </script>
    <!-- Fixed navbar -->
    <div id="topNavbar" class="navbar navbar-default navbar-fixed-top heavyFont" role="navigation">     
    </div>

    <div class="content-wrapper">
      <div class="container">
        <div class="masonry">
              <div class="flex-container row">
                <div class="flex-cell">
                  <div id="firstSquare" class="flex-item masonry-col flex flex-col">
                    <div id="resultNumber" class="flex line-height-normal"></div>
                    <div id="resultSymbol" class="text-center flex content-center justify-center line-height-normal">
                      <span id="resultSymbolInner" class="self-center"></span>
                    </div>
                  </div>
                </div>
                <div class="flex-cell">
                  <div id="secondSquare" class="flex-item masonry-col grid">
                    <div id="group" class="heavyFont"></div>
                    <div id="outputGroup"></div>
                    <div id="period" class="heavyFont"></div>
                    <div id="outputPeriod"></div>
                    <div id="block" class="heavyFont"></div>
                    <div id="outputBlock"></div>
                  </div>
                </div>
              </div>
              <!-- Protons, Electrons, Neutrons -->
              <div class="box-content masonry-col">
                  <div class="grid-3">
                      <div id="protons" class="new-table text-center heavyFont truncate"></div>
                      <div id="electrons" class="new-table text-center heavyFont truncate"></div>
                      <div id="neutrons" class="new-table text-center heavyFont truncate"></div>
                      <div id="outputProtons" class="text-center new-table font-size-1-5"></div>
                      <div id="outputElectrons" class="text-center new-table font-size-1-5"></div>
                      <div id="outputNeutrons" class="text-center new-table font-size-1-5"></div>
                  </div>
              </div>
              <!-- General Prooperties -->
              <div class="box-content masonry-col">
                <span id="labelGeneralProp" class="headerOutline text-upper heavyFont">
                </span>
                <div class="grid">
                  <div id="labelAtmNoMain" class="new-table heavyFont"></div>
                  <div id="outputAtmNoMain" class="new-table"></div>
                  <div id="labelAtmWtMain" class="new-table heavyFont"></div>
                  <div id="outputAtmWtMain" class="new-table"></div>
                  <div id="labelMassNum" class="new-table heavyFont"></div>
                  <div id="outputMassNum" class="new-table"></div>
                  <div id="labelCategoryMain" class="new-table heavyFont"></div>
                  <div id="outputCategoryMain" class="new-table"></div>
                  <div id="labelColorMain" class="new-table heavyFont"></div>
                  <div id="outputColorMain" class="new-table"></div>
                  <div id="labelRadioMain" class="new-table heavyFont"></div>
                  <div id="outputRadioMain" class="new-table"></div>
                  <div id="labelStructureMain" class="new-table heavyFont"></div>
                  <div id="outputStructureMain" class="new-table"></div>
                </div>
              </div>
            <!-- Name Reason -->
              <div class="box-content text-center masonry-col">
                <div id="elementReasonMain" class="line-height-2"></div>
              </div>
              <!-- History -->
                <div class="box-content masonry-col">
                  <span id="history" class="headerOutline text-upper heavyFont"></span>
                  <div id="elementHistoryMain" class="line-height-2"></div>
                </div>
            <!-- Electron Configuration -->
              <div id="electronConf" class="box-content masonry-col">
                <div class="grid padding-bottom-25">
                  <div id="labelElectronsMain" class="new-table heavyFont"></div>
                  <div id="outputElectronsMain" class="new-table ltrText text-left"></div>
                  <div id="labelConfigMain" class="new-table heavyFont hyphen"></div>
                  <div id="outputConfigMain" class="new-table ltrText text-left"></div>
                </div>
                <!-- <div id="elementDiagram">
                  <canvas id="myCanvas"></canvas>
                </div> -->
                <!-- <svelte-electron num="118" sym="He" /> -->
              </div>
              <!-- Facts -->
                <div class="box-content masonry-col text-center">
                  <div id="elementFactsMain" class="line-height-2"></div>
                </div>
            <!-- Physical Properties -->
              <div class="box-content masonry-col">
                <span id="labelPhysicalProp" class="headerOutline text-upper heavyFont">
                </span>
                <div class="grid">
                  <div class="new-table heavyFont" id="labelPhaseMain"></div>
                  <div id="outputPhaseMain" class="new-table"></div>
                  <div class="new-table heavyFont" id="labelDensityMain"></div>
                  <div id="outputDensityMain" class="new-table"></div>
                  <div class="new-table heavyFont" id="labelMeltingMain"></div>
                  <div id="outputMeltingMain" class="new-table"></div>
                  <div class="new-table heavyFont" id="labelBoilingMain"></div>
                  <div id="outputBoilingMain" class="new-table"></div>
                  <div class="new-table heavyFont" id="labelFusionMain"></div>
                  <div id="outputFusionMain" class="new-table"></div>
                  <div class="new-table heavyFont" id="labelVaporizationMain"></div>
                  <div id="outputVaporizationMain" class="new-table"></div>
                  <div class="new-table heavyFont hyphen" id="labelSpecificMain"></div>
                  <div id="outputSpecificMain" class="new-table"></div>
                </div>
              </div>
              <!-- Abundance -->
                <div class="box-content masonry-col">
                  <div class="grid">
                    <div class="new-table heavyFont" id="labelCrustMain"></div>
                    <div id="outputCrustMain" class="new-table"></div>
                    <div class="new-table heavyFont" id="labelUniverseMain"></div>
                    <div id="outputUniverseMain" class="new-table"></div>
                  </div>
                </div>
              <!-- Image -->
              <div class="masonry-col">
                  <div class="blog-thumb">
                  <img id="elementPic" src="images/placeholder.png" alt="" data-toggle="modal" data-target="#exampleModal" />
                </div>
                  <div class="box-content bottom-rounded line-height-2">
                    <span id="imgCredits" class="heavyFont"></span><span id="imgCreditsLink"></span>
                    <div id="imgDesc"></div>
                  </div>
              </div>
              <!-- Identifiers -->
                <div class="box-content masonry-col">
                  <div class="grid">
                    <div class="new-table heavyFont" id="labelCASMain"></div>
                    <div id="outputCASMain" class="new-table"></div>
                    <div class="new-table heavyFont" id="labelCIDMain"></div>
                    <div id="outputCIDMain" class="new-table"></div>
                  </div>
                </div>
            <!-- Atomic Properties -->
              <div class="box-content masonry-col">
                <span id="labelAtomicProp" class="headerOutline text-upper heavyFont">
                </span>
                <div class="grid">
                  <div class="new-table heavyFont" id="labelRadiusMain"></div>
                  <div id="outputRadiusMain" class="new-table"></div>
                  <div class="new-table heavyFont" id="labelCovalentMain"></div>
                  <div id="outputCovalentMain" class="new-table"></div>
                  <div class="new-table heavyFont hyphen" id="labelElectronegativityMain"></div>
                  <div id="outputElectronegativityMain" class="new-table"></div>
                  <div class="new-table heavyFont hyphen" id="labelIonizationMain"></div>
                  <div id="outputIonizationMain" class="new-table"></div>
                  <div class="new-table heavyFont" id="labelVolumeMain"></div>
                  <div id="outputVolumeMain" class="new-table"></div>
                  <div class="new-table heavyFont hyphen" id="labelThermalMain"></div>
                  <div id="outputThermalMain" class="new-table"></div>
                  <div class="new-table heavyFont hyphen" id="labelOxidationMain"></div>
                  <div id="outputOxidationMain" class="new-table ltrText text-left"></div>
                </div>
              </div>
              <!-- Uses -->
                <div class="box-content masonry-col">
                  <span id="uses" class="headerOutline text-upper heavyFont">
                  </span>
                  <div id="elementUsesMain" class="line-height-2"></div>
                  <div></div>
                </div>
            <!-- Hazards -->
              <div class="box-content masonry-col text-center">
                <div id="elementDangersMain" class="line-height-2"></div>
              </div>
              <!-- Isotopes -->
                <div class="box-content masonry-col">
                  <span id="isotopes" class="headerOutline text-upper heavyFont"></span>
                  <div class="heavyFont padding-0 margin-y-10" id="stableIsotopes"></div>
                  <span id="stableIsotopesList" class="isotopeLine"></span>
                  <div class="heavyFont padding-0 margin-y-10" id="unstableIsotopes"></div>
                  <span id="unstableIsotopesList" class="isotopeLine"></span>
                </div>
            <!-- Important Links -->
              <div class="box-content masonry-col">
                <span id="labelLinksMain" class="headerOutline text-upper heavyFont"></span>
                <div class="webLink"><a id="link1" class="underlineLink" target="_blank" rel="noopener noreferrer"></a></div>
                <a id="link2" class="webLink" target="_blank" rel="noopener noreferrer"><span class="underlineLink">Encyclopaedia Britannica</span></a>
                <a id="link3" class="webLink" target="_blank" rel="noopener noreferrer"><span class="underlineLink">Wolfram Alpha</span></a>
                <a id="link4" class="webLink" target="_blank" rel="noopener noreferrer"><span class="underlineLink">Chemicool</span></a>
                <a id="link5" class="webLink" target="_blank" rel="noopener noreferrer"><span class="underlineLink">RSC Visual Elements</span></a>
                <a id="link6" class="webLink" target="_blank" rel="noopener noreferrer"><span class="underlineLink">WebElements</span></a>
              </div>
            <!-- Small Table -->
              <div class="box-content masonry-col">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 325 75" id="tableSVG">
                  <g transform="translate(0,-977.3622)">
                    <g style="opacity: 0.4;">
                      <path transform="translate(0,977.3622)" d="m 162.5,32.5 0,20 10,0 0,20 90,0 0,-40 -90,0 -10,0 z" style="fill: #c76d6d;"></path>
                      <path d="m 2.5,989.86218 10,0 0,60.00002 -10,0 z" style="fill: #ba6f9c;"></path>
                      <path d="m 12.5,989.86218 10,0 0,60.00002 -10,0 z" style="fill: #5688aa;"></path>
                      <path d="m 22.5,1029.8622 150,0 0,10 -150,0 z" style="fill: #a97942;"></path>
                      <path d="m 22.5,1039.8622 150,0 0,10 -150,0 z" style="fill: #857d61;"></path>
                      <path d="m 312.5,979.8622 10,0 0,70 -10,0 z" style="fill: #529311;"></path>
                      <path
                        transform="translate(0,977.3622)"
                        d="m 262.5,22.5 0,50 10,0 10,0 10,0 10,0 0,-10 -10,0 0,-10 -10,0 0,-10 -10,0 0,-20 -10,0 z"
                        style="fill: #8b77c6;"
                      ></path>
                      <path
                        transform="translate(0,977.3622)"
                        d="m 272.5,12.5 0,10 10,0 0,10 10,0 0,10 10,0 0,-30 -10,0 -10,0 -10,0 z"
                        style="fill: #3f8f67;"
                      ></path>
                      <path d="m 302.5,989.8622 10,0 0,60 -10,0 z" style="fill: #498dad;"></path>
                      <path d="m 2.5,979.86218 10,0 0,10 -10,0 z" style="fill: #3f8f67;"></path>
                      <path
                        transform="translate(0,977.3622)"
                        d="m 262.5,12.5 0,10 10,0 0,-10 -10,0 z m 10,10 0,20 10,0 0,10 10,0 0,10 10,0 0,-20 -10,0 0,-10 -10,0 0,-10 -10,0 z"
                        style="fill: #d1744b;"
                      ></path>
                      <path
                        d="m 0,977.3622 0,2.5 0,70 0,2.5 325,0 0,-2.5 0,-70 0,-2.5 -15,0 0,2.5 0,7.5 -50,0 0,2.5 0,17.5 -100,0 0,2.5 0,17.5 -135,0 0,-37.5 0,-2.5 -10,0 0,-7.49805 -2.5,0 0,7.49805 0,0.002 0,2.498 10,0 0,40 2.5,0 135,0 2.5,0 0,-20 97.5,0 2.5,0 0,-20 50,0 0,-2.5 0,-7.5 10,0 0,70 -320,0 0,-70 12.5,0 0,-2.5 -15,0 z"
                        style="fill: #808080;"
                      ></path>
                    </g>
                    <g id="highlight">
                      <path style="fill: #ffffff;" d="m 2.5,1039.8622 10,0 0,10 -10,0 z"></path>
                      <path
                        d="m 2.5,1039.8622 0,2.9199 2.919922,-2.9199 -2.919922,0 z m 6.455078,0 -6.455078,6.4551 0,3.5371 9.990234,-9.9922 -3.535156,0 z m 3.544922,3.5273 -6.472656,6.4727 3.535156,0 2.9375,-2.9375 0,-3.5352 z"
                        style="fill: #000000;"
                      ></path>
                    </g>
                  </g>
                </svg>
                <div id="elementNav" class="row text-center">
                  <a class="underlineLink" id="previousElement"></a>&nbsp;&nbsp;←&nbsp; <span id="currentElement"></span>&nbsp;&nbsp;→&nbsp;
                  <a class="underlineLink" id="nextElement"></a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    <!-- </div> -->
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="modalImage" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-inner">
            <div class="modal-header">
              <span id="modalImage" class="modal-title text-left text-upper heavyFont"></span>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <img id="elementPicture" src="images/placeholder.png" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="footer"></div>
    <!-- Modal -->
    <div class="modal fade" id="settingsModal" tabindex="-1" role="dialog" aria-labelledby="modalSettings" aria-hidden="true"></div>

    <!-- CSS and JavaScript placed at the end of the document so the pages load faster
    ========================================================================================== -->
    <script>
      loadjs=function(){function e(e,n){var t,r,i,c=[],o=(e=e.push?e:[e]).length,f=o;for(t=function(e,t){t.length&&c.push(e),--f||n(c)};o--;)r=e[o],(i=s[r])?t(r,i):(u[r]=u[r]||[]).push(t)}function n(e,n){if(e){var t=u[e];if(s[e]=n,t)for(;t.length;)t[0](e,n),t.splice(0,1)}}function t(e,n,r,i){var o,s,u=document,f=r.async,a=(r.numRetries||0)+1,h=r.before||c;i=i||0,/(^css!|\.css$)/.test(e)?(o=!0,(s=u.createElement("link")).rel="stylesheet",s.href=e.replace(/^css!/,"")):((s=u.createElement("script")).src=e,s.async=void 0===f||f),s.onload=s.onerror=s.onbeforeload=function(c){var u=c.type[0];if(o&&"hideFocus"in s)try{s.sheet.cssText.length||(u="e")}catch(e){u="e"}if("e"==u&&(i+=1)<a)return t(e,n,r,i);n(e,u,c.defaultPrevented)},!1!==h(e,s)&&u.head.appendChild(s)}function r(e,n,r){var i,c,o=(e=e.push?e:[e]).length,s=o,u=[];for(i=function(e,t,r){if("e"==t&&u.push(e),"b"==t){if(!r)return;u.push(e)}--o||n(u)},c=0;c<s;c++)t(e[c],i,r)}function i(e,t,i){var s,u;if(t&&t.trim&&(s=t),u=(s?i:t)||{},s){if(s in o)throw"LoadJS";o[s]=!0}r(e,function(e){e.length?(u.error||c)(e):(u.success||c)(),n(s,e)},u)}var c=function(){},o={},s={},u={};return i.ready=function(n,t){return e(n,function(e){e.length?(t.error||c)(e):(t.success||c)()}),i},i.done=function(e){n(e,[])},i.reset=function(){o={},s={},u={}},i.isDefined=function(e){return e in o},i}();
      loadjs(["btstrp.list.iso.min.js"], {
        success: function() {
          setLangFile(derivedLang);
          loadjs(["constants.min.js", "locales/locale." + derivedLang + ".js"], {
            success: function() {
              elementLoad();
            }
          });
        }
      });

    </script>
    <!-- Get the details from https://woo-metadata-tool.janpotoms.now.sh/ -->
    <script type="application/ld+json">{"@context":"http://schema.org","@type":"Organization","name":"Periodic-Table.io","url":"https://periodic-table.io","address":"","sameAs":["https://twitter.com/periodictableio"]}</script>
  </body>
</html>
